<template>
    <el-collapse v-model="activeNames" style="width: 100%;">
        <el-collapse-item title="命名规范" name="1">
            <div class="standard-title">css命名规范:</div>
            <div>
                <p>
                    .vue文件style中包含scoped的私有CSS变量命名规则为：文件名-描述 exp: panguNav.vue中的私有css pangu-nav--title,
                    <span class="standard-code--block">-</span>依次增加。
                </p>
            </div>
            <div class="standard-title">变量命名规范:</div>
                <p>data类型变量：[具体业务][组件]Data，<span class="standard-code--block">exp：userTableData，userTreeData</span></p>
                <p>表单类型变量：[具体业务]Form，<span class="standard-code--block">exp：loginForm,userForm,addUserForm</span></p>
                <p>显示隐藏类型变量：[具体业务][组件]Visible，<span class="standard-code--block">exp：addUserDialogVisible</span></p>
                <p>ref变量：[具体业务][组件]，<span class="standard-code--block">exp：ref="userTable"</span></p>
                <p>其他变量保持语义化</p>
            <div>
            </div>
            <div class="standard-title">方法命名规范:</div>
            <div>
                <p>1.按钮点击事件包含具体业务意义时命名方式：
                    新增<span class="standard-code--block">add</span>、
                    删除<span class="standard-code--block">delete</span>、
                    修改<span class="standard-code--block">update</span>、
                    查询<span class="standard-code--block">search</span>以这些关键字开头
                </p>
                <p>2.对话框Dialog：
                    <span class="standard-code--block">open[具体业务]Dialog</span>
                </p>
                <p>3.事件Event: 包括@click;@select;@change;@check等事件统一命名为
                    handle[具体业务][组件][事件]，<span class="standard-code--block">exp：handleUserTreeClick</span>
                </p>
            </div>
        </el-collapse-item>
        <el-collapse-item title="代码规范" name="2">
            <p class="standard-title">1.查询表单代码规范：
                <el-popover
                        placement="right"
                        width="800"
                        trigger="click">
                    <el-image src="images/searchInputEffectPic.png"></el-image>
                    <el-button slot="reference" type="primary" size="small" icon="el-icon-picture">效果图展示</el-button>
                </el-popover>
            </p>
            <p>使用行内表单:
                <span class="standard-code--block">:inline="true"</span>；左侧label宽度统一设置为80px(4个字)并且左对齐:
                <span class="standard-code--block">label-width="80px" label-position="left"</span>
            </p>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    v-model="searchFormCode">
            </el-input>
            <p class="standard-title">1.1查询表单input代码规范：</p>
            <p>响应式 :xs="12" :sm="8" :md="8" :lg="6" :xl="5"</p>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    v-model="searchInputCode">
            </el-input>
            <p class="standard-title">1.2查询表单select代码规范：</p>
            <p>响应式 :xs="12" :sm="8" :md="8" :lg="7" :xl="5"</p>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    v-model="searchSelectCode">
            </el-input>
            <p class="standard-title">1.3查询表单button代码规范：</p>
            <p>响应式 :xs="12" :sm="12" :md="8" :lg="6" :xl="5"</p>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    v-model="searchButtonCode">
            </el-input>
            <p class="standard-title">2.数据提交和展示表单代码规范：
                <el-popover
                        placement="right"
                        width="800"
                        trigger="click">
                    <el-image src="images/submitInputEffectPic.png"></el-image>
                    <el-button slot="reference" type="primary" size="small" icon="el-icon-picture">效果图展示</el-button>
                </el-popover>
            </p>
            <p class="standard-title">左侧label宽度统一设置为80px(4个字)并且左对齐:
                <span class="standard-code--block">label-width="80px" label-position="left"</span>
            </p>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    v-model="submitFormCode">
            </el-input>
            <p class="standard-title">2.1数据提交表单input代码规范：</p>
            <p>基本格式无特殊要求</p>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    v-model="submitInputCode">
            </el-input>
            <p class="standard-title">2.2数据提交表单select代码规范：</p>
            <p>添加class="w-full"</p>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    v-model="submitSelectCode">
            </el-input>
            <p class="standard-title">3.table代码规范：包括不同场景的表格使用、操作表格按钮的设置以及表格项的具体规范</p>
            <p class="standard-title">
                3.1 分页-定宽定高-无固定列-无操作列：用来展示数据量偏多，列数可以满足数据展示，并且不需要展示额外详细信息的表格
                <el-popover
                        placement="right"
                        width="800"
                        trigger="click">
                    <el-image src="images/pageinationTable.png"></el-image>
                    <el-button slot="reference" type="primary" size="small" icon="el-icon-picture">效果图展示</el-button>
                </el-popover>
            </p>
            <p>
                表格数据，为数组类型：<span class="standard-code--block">:data="tableData"</span>；
                表格高度：<span class="standard-code--block">height="528"</span>；
                加载数据：<span class="standard-code--block">v-loading="loading"</span>;
                带斑马纹：<span class="standard-code--block">stripe</span>;
            </p>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    v-model="pageinationTableCode">
            </el-input>
            <p class="standard-title">
                3.2 流体表格-无固定列-无操作列：用来展示数据量不多，列数可以满足数据展示，并且不需要展示额外详细信息的表格
                <el-popover
                        placement="right"
                        width="800"
                        trigger="click">
                    <el-image src="images/fluidTableEffectPic.png"></el-image>
                    <el-button slot="reference" type="primary" size="small" icon="el-icon-picture">效果图展示</el-button>
                </el-popover>
            </p>
            <p>
                定义流体最大高度：<span class="standard-code--block">max-height="528"</span>;
            </p>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    v-model="fluidTableCode">
            </el-input>
            <p class="standard-title">
                3.3 （流体或分页）有固定列-有操作列：用来展示列数过多需要横向滚动条，或者有详细信息需要展示
                <el-popover
                        placement="right"
                        width="800"
                        trigger="click">
                    <el-image src="images/extraTableEffectPic.png"></el-image>
                    <el-button slot="reference" type="primary" size="small" icon="el-icon-picture">效果图展示</el-button>
                </el-popover>
            </p>
            <p>
                需要被固定的列：<span class="standard-code--block">fixed</span>;
                列的模版：<span class="standard-code--block">template</span>;
            </p>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    v-model="extraTableData">
            </el-input>
            <p class="standard-title">
                3.4 与表格相关的按钮操作：类似于新增修改删除等和权限相关的按钮操作
                <el-popover
                        placement="right"
                        width="800"
                        trigger="click">
                    <el-image src="images/tableButtonEffectPic.png"></el-image>
                    <el-button slot="reference" type="primary" size="small" icon="el-icon-picture">效果图展示</el-button>
                </el-popover>
            </p>
            <p>
                一般的按钮使用：<span class="standard-code--block">type="primary"</span>;
                删除使用：<span class="standard-code--block">type="danger"</span>;
                与表格相关的按钮统一使用小号按钮：<span class="standard-code--block">size="small"</span>;
            </p>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    v-model="tableButtonData">
            </el-input>
            <p class="standard-title">4.dialog代码规范
                <el-popover
                        placement="right"
                        width="800"
                        trigger="click">
                    <el-image src="images/fluidTableEffectPic.png"></el-image>
                    <el-button slot="reference" type="primary" size="small" icon="el-icon-picture">效果图展示</el-button>
                </el-popover>
            </p>
            <p>
                设置dialog的标题：<span class="standard-code--block">title="收货地址"</span>；
                设置显示隐藏控制变量：<span class="standard-code--block">:visible.sync="dialogFormVisible"</span>；
                设置弹窗宽度：<span class="standard-code--block">width="40%"</span>
             </p>
            <p>如果弹窗footer需要操作按钮代码如下</p>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    v-model="dialogCode">
            </el-input>
            <p class="standard-title">5.请求代码规范</p>
            <p>
                url：<span class="standard-code--block">请求地址</span>；
                method：<span class="standard-code--block">GET（查询），POST（新增）,PUT（修改），DELETE（删除）必须大写</span>；
                params/data：<span class="standard-code--block">GET/DELETE为params参数，是对象类型，POST/PUT为data参数，对象需要经过this.$qs.stringify()转化</span>
            </p>
            <p class="standard-title">5.1 GET请求代码规范</p>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    v-model="getCode">
            </el-input>
            <p class="standard-title">5.2 POST请求代码规范</p>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    v-model="postCode">
            </el-input>
            <p class="standard-title">5.3 PUT请求代码规范</p>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    v-model="putCode">
            </el-input>
            <p class="standard-title">5.4 DELETE请求代码规范</p>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 5}"
                    v-model="deleteCode">
            </el-input>
        </el-collapse-item>
        <el-collapse-item title="界面规范" name="3">
            <div class="title">一致性 Consistency:</div>
            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
            <div class="title">反馈 Feedback:</div>
            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
            <div class="title">效率 Efficiency:</div>
            <div>简化流程：设计简洁直观的操作流程；</div>
            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
            <div class="title">可控 Controllability:</div>
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
    export default {
        name: "standard",
        data() {
            return {
                activeNames: ['1'],
                searchFormCode:
                '<el-form :inline="true" :model="formInline" label-width="80px" label-position="left">\n' +
                '  表单项\n' +
                '</el-form>',
                searchInputCode:
                '<el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="5">\n' +
                '  <el-form-item label="审批人">\n' +
                '     <el-input v-model="formInline.user" placeholder="审批人"></el-input>\n' +
                '  </el-form-item>\n' +
                '</el-col>',
                searchSelectCode:
                '<el-col :xs="12" :sm="8" :md="8" :lg="7" :xl="5">\n' +
                '  <el-form-item label="活动区域">\n' +
                '    <el-select v-model="formInline.region" placeholder="活动区域">\n' +
                '      <el-option label="区域二" value="beijing"></el-option>\n' +
                '    </el-select>\n' +
                '   </el-form-item>\n' +
                '</el-col>',
                searchButtonCode:
                '<el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="5">\n' +
                '   <el-form-item>\n' +
                '     <el-button type="primary" icon="el-icon-search" @click="searchForm">查询</el-button>\n' +
                '     <el-button type="primary" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>\n' +
                '   </el-form-item>\n' +
                '</el-col>',
                submitFormCode:
                '<el-form ref="form" :model="form" label-width="80px" label-position="left">\n' +
                '  表单项\n'+
                '</el-form>',
                submitInputCode:
                '<el-form-item label="活动名称"\n' +
                '  <el-input v-model="form.name"></el-input>\n' +
                '</el-form-item>',
                submitSelectCode:
                '<el-form-item label="活动区域" >\n' +
                '  <el-select v-model="form.region" placeholder="请选择活动区域" class="w-full">\n' +
                '    <el-option label="区域一" value="shanghai"></el-option>\n' +
                '  </el-select>\n' +
                '</el-form-item>',
                pageinationTableCode:
                '<el-table\n' +
                '  :data="tableData"\n' +
                '  height="528"\n' +
                '  v-loading="loading"\n' +
                '  stripe>\n' +
                '</el-table>'+
                 '<el-pagination\n' +
                '   @size-change="handlePaginationSizeChange"\n' +
                '   @current-change="handlePaginationCurrentChange"\n' +
                '   :current-page="currentPage4"\n' +
                '   :page-sizes="[10, 20, 50, 100]"\n' +
                '   :page-size="10"\n' +
                '   layout="total, sizes, prev, pager, next, jumper"\n' +
                '   :total="400"\n' +
                '   class="block-center m-t-md">\n' +
                '</el-pagination>',
                fluidTableCode:
                '<el-table\n' +
                '  :data="fluidTableData"\n' +
                '  max-height="528"\n' +
                '  v-loading="loading"\n' +
                '  stripe>\n'+
                '</el-table>',
                extraTableData:
                '<el-table-column\n' +
                '  fixed\n' +
                '  prop="date"\n' +
                '  label="日期"\n' +
                '  width="150">\n' +
                '</el-table-column>\n'+
                '<el-table-column\n' +
                '  fixed="right"\n' +
                '  label="操作"\n' +
                '  width="120">\n' +
                '  <template slot-scope="scope">\n' +
                '    <el-button\n' +
                '      @click.native.prevent="deleteRow(scope.$index, tableData)"\n' +
                '      type="text"\n' +
                '      size="small">\n' +
                '      查看详情\n' +
                '    </el-button>\n' +
                '  </template>\n' +
                '</el-table-column>',
                tableButtonData:
                '<el-table-column\n' +
                '  align="right">\n' +
                '  <template slot="header">\n' +
                '    <el-button\n' +
                '      size="small"\n' +
                '      type="primary"\n' +
                '      icon="el-icon-plus"\n' +
                '      @click="handleAdd(scope.$index, scope.row)">新增</el-button>\n' +
                '  </template>\n' +
                '  <template slot-scope="scope">\n' +
                '    <el-button\n' +
                '       size="small"\n' +
                '       type="primary"\n' +
                '       icon="el-icon-edit"\n' +
                '       @click="handleUpdate(scope.$index, scope.row)" >修改</el-button>\n' +
                '    <el-button\n' +
                '       size="small"\n' +
                '       type="danger"\n' +
                '       icon="el-icon-delete"\n' +
                '       @click="handleDelete(scope.$index, scope.row)">删除</el-button>\n' +
                '  </template>\n' +
                '</el-table-column>',
                dialogCode:
                '<el-dialog title="收货地址" :visible.sync="dialogFormVisible" width="40%">\n' +
                '  弹出框内容\n'+
                '  <div slot="footer">\n' +
                '    <el-button @click="dialogFormVisible = false">取 消</el-button>\n' +
                '    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>\n' +
                '  /div>\n' +
                '</el-dialog>',
                getCode:
                'this.$http({\n' +
                '  url: \'/function/getFunctionsElementTree\',\n' +
                '  method: \'GET\',\n' +
                '  params: data,\n' +
                '  }).then((data) => {\n' +
                '  this.treeData = data;\n' +
                '})',
                postCode:
                'this.$http({\n' +
                '  url: \'/function\',\n' +
                '  method: \'POST\',\n' +
                '  data: this.$qs.stringify(this.routerForm)\n' +
                '}).then((data) => {\n' +
                '})',
                putCode:
                'this.$http({\n' +
                '  url: \'/function\',\n' +
                '  method: \'PUT\',\n' +
                '  data: this.$qs.stringify(this.routerForm)\n' +
                '}).then((data) => {\n' +
                '})',
                deleteCode:
                'this.$http({\n' +
                '  url: `/function/${row.funId}`,\n' +
                '  method: \'DELETE\',\n' +
                '  params: data,\n' +
                '}).then((data) => {\n' +
                '})'
            }
        },
    }
</script>

<style scoped lang="stylus">
    .standard-title
        font-weight: bold
    .standard-code--block
        background: #ecf5ff
        padding: 9px
        font-size: 14px
        font-weight: bold
        border-radius: 5px
</style>